<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="编号" prop="bookid" aria-readonly="true">
            <el-input v-model="form.bookid">

            </el-input>
        </el-form-item>
        <el-form-item label="书名" prop="name">
            <el-input v-model="form.name">

            </el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input v-model="form.price">

            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onsubmit('form')">
                立即创建
            </el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "update",
        created() {
            //这里更像是初始化一些数据 重写定义一个this 目的就是为了我们可以不被回调函数所影响
            //这里我们可以获取到我们的路由里面的id值
            let _this = this;
            axios.get('http://localhost:8082/temp/findById/' + this.$route.query.id).then(function (resp) {
                _this.form = resp.data;//这个时候就会进行数据回填
            })
        },
        data() {
            return {
                form: {
                    bookid: '',
                    name: '',
                    price: '',
                }, rules: {
                    name: [
                        {required: true, message: '请输入图书名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                }
            }
        }, methods: {
            onsubmit(formName) {
                let _this1 = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //这个put里面也是传递了参数进去
                        axios.put('http://localhost:8082/temp/update', this.form).then(function (resp) {
                            if (resp.data) {
                                _this1.$alert('《' + _this.form.name + '》修改成功', {//这里其实就是
                                    // 前端同学要去做的
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this1.$router.push('/index01')
                                        //相当于是更改我们的路由地址
                                    }
                                })
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>

</style>